<?php
include 'header.php';
?>
<div class="container canvas">
    <div class="row">
        <div class="span6">
            <ul class="media-grid">
                <li style="position: relative">
                    <img class="santa thumbnail" src="img/santa_girl.png" alt="">
                </li>
            </ul>
        </div>
        <div class="span6 desc">
            <h1>Find the Perfect Gift</h1>
            <p>
                It is boring to give the same gift each year for your friends and family. Now We give you new fresh ideas. 
                You can find the gifts according to the unique personality and interests of people and what they like or dislike. 
                It's not difficult to find a perfect christmas gifts for your friends - just try our app!
            </p>
            <?php
            if ($connected) :
                ?>
                <form class="form-stacked">
                    <fieldset>
                        <div class="clearfix">
                            <label for="xlInput">Find your friend</label>
                            <div class="input">
                                <input class="xlarge search" id="xlInput" name="xlInput" size="30" type="text">
                            </div>
                            <label class="friends_avatars_label" for="xlInput" style="margin-top: 10px">or choose from these</label>
                            <div class="input friends_avatars">

                            </div>
                        </div><!-- /clearfix -->
                        <div class="clearfix">
                    </fieldset>
                </form>
                <?php
            else:
                ?>
                <h2>Connect with app!</h2>
                <p>
                    To find the best gift you must give this app access to your friends. Connect!
                </p>
                <a class="btn primary auth" href="">Connect</a>
                <form class="form-stacked" style="opacity:.6">
                    <fieldset>
                        <div class="clearfix">
                            <label for="xlInput">Find your friend</label>
                            <div class="input">
                                <input class="xlarge disabled" id="xlInput" name="xlInput" size="30" type="text" value="First we need you to click 'Connect' button" disabled>
                            </div>
                        </div><!-- /clearfix -->
                        <div class="clearfix">
                    </fieldset>
                </form>
            <?php
            endif;
            ?>
            <div id="extra-form" style="display: none">
                <h2>Oh crap..</h2>
                <p>
                    Unfortunately, we could not find enough information about your friends. Enter below few things to help us find the perfect gift for <i class="name">Agnieszka Zdebiak</i>.
                </p>
                <form class="form-stacked">
                    <fieldset>
                        <div class="clearfix">
                            <input name="friend_id" type="hidden" value="">
                            <input name="sex" type="hidden" value="">
                            <label for="age">Age</label>
                            <div class="input">
                                <input class="xlarge" placeholder="12" name="age" size="30" type="text"> years old
                            </div>
                            <label for="likes" style="margin-top: 10px">Choose what <i>your friend</i> likes:</label>
                            <?php
                            $categories = array('Cars', 'Milk', 'Worms', 'Nature', 'Garden');
                            $cat_female = array();
                            $cat_female[0] = 'Art';
                            $cat_female[1] = 'Business';
                            $cat_female[8] = 'Books';
                            $cat_female[12] = 'House';
                            $cat_female[14] = 'Cooking';
                            $cat_female[16] = 'Style';
                            $cat_female[4] = 'Film';
                            $cat_female[6] = 'Music';

                            $cat_male = array();
                            $cat_male[2] = 'Electronics';
                            $cat_male[9] = 'IT';
                            $cat_male[13] = 'Automotive';
                            $cat_male[15] = 'DIY';
                            $cat_male[17] = 'Games';
                            $cat_male[7] = 'Sport';
                            $cat_male[6] = 'Music';
                            $cat_male[4] = 'Film';

                            $cat_other = array();
                            $cat_other[3] = 'Education';
                            $cat_other[5] = 'Entertainment';
                            $cat_other[10] = 'Healthcare';
                            $cat_other[11] = 'Travel';
                            $cat_other[18] = 'Science';
                            $cat_other[19] = 'News, Politycs';
                            $cat_other[20] = 'Partying';
                            ?>
                            <div class="input">

                                <ul class="inputs-list female">
                                    <?php
                                    foreach ($cat_female as $key => $value) :
                                        ?>
                                        <li>
                                            <label>
                                                <input type="checkbox" name="<?php echo 'category_' . $key; ?>" value="1">
                                                <span><?php echo $value; ?></span>
                                            </label>
                                        </li>
                                        <?php
                                    endforeach;
                                    ?>
                                </ul>

                                <ul class="inputs-list male">
                                    <?php
                                    foreach ($cat_male as $key => $value) :
                                        ?>
                                        <li>
                                            <label>
                                                <input type="checkbox" name="<?php echo 'category_' . $key; ?>" value="1">
                                                <span><?php echo $value; ?></span>
                                            </label>
                                        </li>
                                        <?php
                                    endforeach;
                                    ?>
                                </ul>

                            </div>

                            <div class="input" style="margin-top: 10px;">
                                <input type="submit" class="btn primary" value="Send"> or 
                                <a href="#" id="backto_friends_avatars">back to friends avatars</a>
                            </div>

                        </div><!-- /clearfix -->
                        <div class="clearfix">
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
    <div class="page-header">
        <h1>Chosen gifts for <i>...</i></h1>
    </div>

    <div class="row presents">

        <div class="span12 loading" style="display:none">
            <p><img class="thumbnail" src="img/ajax-loader.gif" alt=""> Loading..</p>
        </div>

        <?php
        if (!$connected):
            ?>
            <div class="span6 connect">
                <h2>Connect!</h2>
                <p>
                    Need some ideas to find the perfect gift for your best friend? We must check tastes of your friends. Connect!
                </p>
                <p>
                    <a class="btn primary auth" href="">Connect with this app!</a>
                </p>
            </div>
            <?php
        endif;
        ?>
        <div class="span6 product likes">
            <h2>According to likes</h2>
            <i class="icon-left-open"></i>
            <div class="slider">
                <dv class="wrapper">
                    <div class="slide">
                        <a href="" target="_blank">
                            <img class="product_photo" src="http://ecx.images-amazon.com/images/I/51JH6sTAifL._SL160_.jpg"/>
                        </a>
                        <h3>Helicopter</h3>
                        <small>15 razy polubiła to</small>
                        <a href="#" target="_blank">
                            <img class="buy_button_img" src="/img/amazon_button.gif"/>
                        </a>
                    </div>
                    <div class="slide">
                        <img class="product_photo"  src="photos/2.jpg"/>
                        <h3>Helikopter2</h3>
                        <small>15 razy polubiła to</small>
                    </div>
                </dv>
            </div>
            <i class="icon-right-open"></i>
        </div>

        <div class="span6 product gender">
            <h2>According to sex</h2>
            <i class="icon-left-open"></i>
            <div class="slider">
                <dv class="wrapper">
                    <div class="slide">
                        <a href="" target="_blank">
                            <img class="product_photo"  src="photos/2.jpg"/>
                        </a>
                        <h3>Torebka</h3>
                        <small>15 razy polubiła to</small>
                    </div>
                    <div class="slide">
                        <img class="product_photo"  src="http://placehold.it/200x180"/>
                        <h3>Helikopter2</h3>
                        <small>15 razy polubiła to</small>
                    </div>
                </dv>
            </div>
            <i class="icon-right-open"></i>
        </div>

        <div class="span6 product genderage">
            <h2>According to age</h2>
            <i class="icon-left-open"></i>
            <div class="slider">
                <dv class="wrapper">
                    <div class="slide">
                        <a href="" target="_blank">
                            <img class="product_photo"  src="photos/3.jpg"/>
                        </a>
                        <h3>Szminka</h3>
                        <small>15 razy polubiła to</small>
                    </div>
                    <div class="slide">
                        <img class="product_photo"  src="http://placehold.it/200x180"/>
                        <h3>Helikopter2</h3>
                        <small>15 razy polubiła to</small>
                    </div>
                </dv>
            </div>
            <i class="icon-right-open"></i>
        </div>

        <?php
        if ($connected):
            ?>
            <div class="span6 connect" style="position: relative">
                <img id="santa_hat" src="img/santa_hat.png"/>
                <h2>Now choose gifts for you!</h2>
                <p>
                    Santa have full hands of work, help him choosing gifts for you.
                </p>
                <p>
                    <a class="btn primary" href="/you.php<?php echo $signed_request; ?>">Help our Santa!</a>
                </p>
            </div>
            <?php
        endif;
        ?>
    </div>
    <?php
    include 'footer.php';
    ?>